<template>
    <div class="imglist">
        <ul>
            <router-link tag="li" :to="'/home/photoinfo/'+item.id" v-for="item in list">
                <img v-lazy="item.img_url">
                <div class="imginfo">
                    <h4>{{item.seo_title}}</h4>
                    <p class="content" >{{item.zhaiyao}}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "imgList",
        data(){
            return{
            }
        },
        props:['list']
    }
</script>

<style scoped lang="scss">
.imglist{
    ul{
        list-style: none;
        margin: 0;
        padding: 0 10px 55px;
        li{
            margin-top: 10px;
            background-color: #e3e3e3;
            text-align: center;
            position: relative;
            img{
                width: 100%;
                vertical-align:middle ;
                box-shadow: 0 0 8px rgba(0,0,0,.4);
            }
            img[lazy=loading] {
                width: 80px;
                height: 400px;
                margin: auto;
            }
            .imginfo{
               position: absolute;
                bottom: 0;
                color: #FFFFFF;
                height: 100px;
                background-color: rgba(0,0,0,.5);
                h4{
                    font-size: 15px;
                }
                .content{
                    margin-top: 15px;
                    color: #FFFFFF;
                    text-align: left;
                    text-indent: 24px;
                    font-size: 12px;
                    p{
                        color: #FFFFFF;
                        text-align: left;
                        text-indent: 24px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>
